import React, { useState, useEffect } from "react"
import { Button } from "antd"
import { PlusOutlined } from "@ant-design/icons"

import Dashboard from "./Dashboard"
import { TablePlus, DrawerPlus } from "../../../commponents"
import { Rule, User } from "./Content"

const Contents = ({ api = "", operate = "Dashboard", menuKey = "" }) => {
  useEffect(() => {
    switchContent(menuKey)
  }, [menuKey])
  const switchContent = (key) => {
    console.log("object:" + key)
    switch (key) {
      case "dashboard":
        return <Dashboard />
      case "User":
        return <User />
      case "Rule":
        return <Rule />
      default:
        return <Dashboard />
    }
  }
  const [visible, setVisible] = useState(false)
  const showDrawer = () => {
    setVisible(true)
  }
  return (
    <div>
      {menuKey}
      {switchContent(menuKey)}
      <Button type='primary' onClick={showDrawer}>
        <PlusOutlined /> New account
      </Button>
      <DrawerPlus visible={visible} setVisible={setVisible} />
      <TablePlus url={api} />
    </div>
  )
}

export default Contents
